<template>
  <!-- #ifdef APP-PLUS || MP-->
  <!-- 导航栏组件，根据type显示不同的标题，并设置返回按钮 -->
  <u-navbar
      :title="type==='1'?'团长规则':'活动规则'"
      placeholder
      titleStyle="color:black"
      leftIconColor="#000"
      auto-back></u-navbar>
  <!-- #endif -->
  <!-- 内容容器 -->
  <view class="content">
    <!-- 顶部间距 -->
    <view style="height: 10rpx"></view>
    <!-- 特别提示部分，仅在type为3时显示 -->
    <view v-if="parseInt(type) === 3">
      <!-- 特别提示标题 -->
      <view class="top_content">
        <view style="font-size: 36rpx;font-weight: bold;color: #F9692A;">
          特别提示
        </view>
        <!-- 特别提示内容 -->
        <view style="font-size: 30rpx;color: #F9692A;line-height: 68rpx;margin-top: 10rpx">
          参与活动前，请仔细阅读活动规则的各个条款，特别是与用户违规相关的条款。用户参与本活动即视为已充分阅读、理解本活动规则，并自愿受活动规则的约束挑战赛基本规则
        </view>
      </view>
      <!-- 间距 -->
      <view style="margin-top: 28rpx;"></view>
    </view>
    <!-- 规则标题，根据type显示不同的内容 -->
    <view style="font-size: 36rpx;font-weight: bold;color: #3D3D3D;margin-bottom: 16rpx">
      {{ type === '1' ? '团长活动基本规则' : type === '5' ? '会员基本规则' : '挑战赛基本规则' }}
    </view>
    <!-- 解析并显示规则内容 -->
    <up-parse :content="rule?.content"></up-parse>
  </view>
  <!-- 底部间距 -->
  <view style="height: 60rpx"></view>
  <!-- 安全底部区域 -->
  <u-safe-bottom></u-safe-bottom>
</template>

<script setup>
import {ref} from "vue";
import {getRuleConfigAPI} from "../services/lstz";
import {onLoad} from "@dcloudio/uni-app";

const rule = ref()
const type = ref('0')
onLoad(async (options) => {
  type.value = options.type + ''
  await getChallengeAPI(options.type)
})

const getChallengeAPI = async (type) => {
  const res = await getRuleConfigAPI(type)
  rule.value = res.result
}
</script>

<style lang="scss">
page {
  background-color: #F6F6F6;
  height: 100%;
}
</style>
<style scoped lang="scss">
.content {
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  width: 710rpx;
  margin: 20rpx auto;
  padding: 20rpx;
}

.top_content {
  padding: 16rpx;
  background: #FFF8EC;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
}
</style>
